<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 移动网页必须设置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>分类</title>
    <script src="./font_s/iconfont.js"> </script>
    <link rel="stylesheet" href="./font_s/iconfont.css">
    <style>
               .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        body{
            min-width: 320px;
        }
        h3,
        h2,
        ul,
        p,
        body {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .bnav {
            position: fixed;
            /* 固定的盒子 */
            left: 0;
            bottom: 0;
            width: 100%;
            /* 不设置为内容宽度 */
            background-color: #fff;
            z-index: 9;
            display: flex;
            /* 横着放 */
        }

        .bnav>li {
            width: 25%;
            text-align: center;
        }

        .bnav svg {
            font-size: 40px;
            line-height: 50px;
        }

        .bnav p {
            font-size: 14px;
            line-height: 28px;
        }

        .bnav a {
            color: #333;
        }

        body {
            margin-bottom: 80px;
            /* 最下面的东西可以显示（不会被nav挡住） */
            margin-top: 30px;
        }
        #head{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 8; 

            display: flex;
        }
        #head>.icon-zuojiantou{
            font-size: 20px;
            padding: 3px 10px;
        }
        #head>div{
            flex-grow: 1;
            background-color: #ddd;
            border-radius: 10px;
            display: flex;
            padding-right: 10px;
        }
        #head>p{
            line-height: 28px;
            font-size: 16px;
            padding: 3px 10px;
        }
        #head .icon-sousuo{
            font-size: 14px;
            padding: 3px 8px;
            margin-top: 6px;
        }
        #search{
            border: none;
            flex-grow: 1;
            background-color: #ddd;
            outline: none;/* 轮廓线 */
        }


        .slist{
            display: flex;
        }
        .slist>li{
            width: 80%;
            margin-right: 1px;
        }
        .slist img{
            width: 100%;
        }
        .slist p{
            font-size: 14px;
            line-height: 26px;
            text-align: center;
        }



        .xia{
            display: flex;
            flex-wrap: wrap;
        }
        .xia>div{
            width: 40%;/* 大于三个   小于两个的位置 */
            margin-right: 1px;
            flex-grow: 6;/* 自适应宽度  剩下的宽度等比例分配出去 */
        }
        .xia img{
            width: 100%;
        }
        .xia p{
            font-size: 3.2vw;
            line-height: 150%;
            text-align: center;
        }
    </style>
</head>
<body>
    <header id="head">
        <span class="iconfont icon-zuojiantou"></span>
        <div>
            <span class="iconfont icon-sousuo"></span>
            <input type="search" id="search" name="search" placeholder="您想看的图书在这里哦！！！">
        </div>
        <p>搜索</p>
    </header>

    <div class="shang">
        <ul class="slist">
            <li>
                <a href="#"><img src="./images/shuji15.jpg" alt=""></a>
                <p>在读榜</p>
            </li>
            <li>
                <a href="#"><img src="./images/shuji.8.jpg" alt=""></a>
                <p>新书榜</p>
            </li>
            <li>
                <a href="#"><img src="./images/shuji.9.jpg" alt=""></a>
                <p>故事</p>
            </li>
        </ul>
    </div>
    <div class="xia">
        <div>
            <a href="#"><img src="./images/shuji12.jpg" alt=""></a>
            <p>豆瓣8.0+</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji18.jpg" alt=""></a>
            <p>红色传承</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji14.jpg" alt=""></a>
            <p>小说</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji11.png" alt=""></a>
            <p>漫画绘本</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji16.jpg" alt=""></a>
            <p>青春</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji14.jpg" alt=""></a>
            <p>推理幻想</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.1.jpg" alt=""></a>
            <p>历史</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.2.jpg" alt=""></a>
            <p>国风文化</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji11.jpg" alt=""></a>
            <p>兴趣培养</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji10.jpg" alt=""></a>
            <p>短篇集</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.9.jpg" alt=""></a>
            <p>经典名著</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.8.jpg" alt=""></a>
            <p>恋爱沟通</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.7.jpg" alt=""></a>
            <p>考试必备</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.1.jpg" alt=""></a>
            <p>技能提升</p>
        </div>
        <div>
            <a href="#"><img src="./images/shuji.5.jpg" alt=""></a>
            <p>哲学社科</p>
        </div>
    </div>


        <div id="footer" class="clearfix">
        <ul class="bnav">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu1"></use>
                </svg>
                <p><a href="index.html">领读</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shudan1"></use>
                </svg>
                <p><a href="#">分类</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wuxiaodingdan"></use>
                </svg>
                <p><a href="shuzhuo.html">书桌</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                </svg>
                <p><a href="wo.html">我</a></p>
            </li>
        </ul>
    </div>
</body>
</html>